---
title: Documentation
---

import { Bleed, Tabs, Tab, Callout } from 'nextra-theme-docs';
import { useRef, useEffect } from 'react';
import {
  ExampleCard,
  IntegrationCard,
  FeatureCard,
} from '@/components/home/card';
import { Globe } from '@/components/home/globe';
import { Browser } from '@/components/home/browser';
import { Streaming } from '@/components/home/streaming';
import { Logos } from '@/components/home/logos';
import Link from 'next/link';

{<h1 className="text-5xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100 md:text-5xl mt-2 main-title">Vercel AI SDK</h1>}

<div className="text-neutral-600 tracking-tight dark:text-neutral-400 text-xl mt-4 mb-8">
  An open source library for building AI-powered user interfaces.
</div>

The Vercel AI SDK is an open-source library designed to help developers build conversational streaming user interfaces in JavaScript and TypeScript. The SDK supports React/Next.js, Svelte/SvelteKit, and Vue/Nuxt as well as Node.js, Serverless, and the [Edge Runtime](https://edge-runtime.vercel.app).

<div className="grid lg:grid-cols-2 grid-cols-1 gap-4 mt-8">
  <FeatureCard
    href="/docs/getting-started#create-an-api-route"
    title="Serverless &amp; Edge-ready"
    description="Build AI-powered apps that are fast across Node.js, Serverless, and Vercel Edge Functions."
  >
    <Globe />
  </FeatureCard>
  <FeatureCard
    href="/docs/guides"
    title="Built-in Adapters"
    description="First-class support for LangChain, OpenAI, Anthropic, and Hugging Face."
  >
    <Logos />
  </FeatureCard>
  <FeatureCard
    href="/docs/concepts/ai-rsc"
    title="Generative UI"
    description="Go beyond text by augmenting your LLM responses with React Server Components."
  >
    <Browser />
  </FeatureCard>
  <FeatureCard
    href="/docs/guides/providers/openai#guide-save-to-database-after-completion"
    title="Stream Lifecycle Callbacks"
    description="Callbacks for saving completed streaming responses to a database in the same request."
  >
    <Streaming />
  </FeatureCard>
</div>

## Templates &amp; Examples [#examples]

You can also clone or deploy a Vercel AI SDK starter repository to get a head start on your AI journey. For even more examples and starters, see the [Vercel AI SDK examples directory on GitHub](https://github.com/vercel/ai/tree/main/examples).

export function A({ href, children }) {
  return (
    <a
      href={href}
      target="_blank"
      className="!text-neutral-800 decoration-neutral-400 hover:decoration-neutral-900"
    >
      {children}
    </a>
  );
}

<div className="grid lg:grid-cols-2 grid-cols-1 gap-4 mt-8">
  <ExampleCard
    title="Next.js AI Chatbot"
    description={
      <>
        Full-featured AI chatbot built with{' '}
        <A href="https://nextjs.org">Next.js</A>,{' '}
        <A href="https://ui.shadcn.com/">shadcn/ui</A>,{' '}
        <A href="https://github.com/nextauthjs/next-auth">NextAuth.js</A>,{' '}
        <A href="https://sdk.vercel.ai">Vercel AI SDK</A>, and{' '}
        <A href="https://vercel.com/storage/kv">Vercel KV</A>
      </>
    }
    demoUrl="https://chat.vercel.ai"
    deployUrl="https://vercel.com/templates/Next.js/nextjs-ai-chatbot"
    repoUrl="https://github.com/vercel-labs/ai-chatbot"
  >
    ![Next.js AI Chatbot](/templates/next-ai-chatbot-light.png)
  </ExampleCard>
  <ExampleCard
    title="Next.js OpenAI Starter"
    description={
      <>
        Starter template for building AI-powered chat with{' '}
        <A href="https://nextjs.org">Next.js</A>,{' '}
        <A href="https://openai.com/">OpenAI</A>, and the{' '}
        <A href="https://sdk.vercel.ai">Vercel AI SDK</A>
      </>
    }
    deployUrl="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-openai&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=vercel-ai-chat-openai&repository-name=vercel-ai-chat-openai"
    repoUrl="https://github.com/vercel/ai/tree/main/examples/next-openai"
  >
    ![Next.js OpenAI Starter](/templates/next-openai-light.png)
  </ExampleCard>
  <ExampleCard
    title="SvelteKit OpenAI Starter"
    description={
      <>
        Starter template for building AI-powered chat with{' '}
        <A href="https://kit.svelte.dev">SvelteKit</A>,{' '}
        <A href="https://openai.com/">OpenAI</A>, and the{' '}
        <A href="https://sdk.vercel.ai">Vercel AI SDK</A>
      </>
    }
    deployUrl="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fsveltekit-openai&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=vercel-ai-chat-sveltekit-openai&repository-name=vercel-ai-chat-sveltekit-openai"
    repoUrl="https://github.com/vercel/ai/tree/main/examples/sveltekit-openai"
  >
    ![SvelteKit Starter](/templates/svelte-openai-light.png)
  </ExampleCard>
  <ExampleCard
    title="Nuxt OpenAI Starter"
    description={
      <>
        Starter template for building AI-powered chat with{' '}
        <A href="https://nuxt.com">Nuxt</A>,{' '}
        <A href="https://openai.com/">OpenAI</A>, and the{' '}
        <A href="https://sdk.vercel.ai">Vercel AI SDK</A>
      </>
    }
    deployUrl="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnuxt-openai&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=vercel-ai-chat-nuxt-openai&repository-name=vercel-ai-chat-nuxt-openai"
    repoUrl="https://github.com/vercel/ai/tree/main/examples/nuxt-openai"
  >
    ![Nuxt Starter](/templates/nuxt-openai-light.png)
  </ExampleCard>
  <ExampleCard
    title="Next.js Hugging Face Starter"
    description={
      <>
        Starter template for building AI-powered chat with{' '}
        <A href="https://nextjs.org">Next.js</A>,{' '}
        <A href="https://huggingface.co/">Hugging Face</A>, and the{' '}
        <A href="https://sdk.vercel.ai">Vercel AI SDK</A>
      </>
    }
    deployUrl="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-huggingface&env=HUGGINGFACE_API_KEY&envDescription=Hugging%20Face%20User%20Access%20Token&envLink=https%3A%2F%2Fhuggingface.co%2Fsettings%2Ftokens&project-name=next-huggingface&repository-name=ai-next-huggingface"
    repoUrl="https://github.com/vercel/ai/tree/main/examples/next-huggingface"
  >
    ![Next.js Hugging Face Starter](/templates/next-huggingface-light.png)
  </ExampleCard>
  <ExampleCard
    title="Next.js LangChain Starter"
    description={
      <>
        Starter template for building AI-powered chat app with{' '}
        <A href="https://nextjs.org">Next.js</A>,{' '}
        <A href="https://github.com/hwchase17/langchain">LangChain</A>, and the{' '}
        <A href="https://sdk.vercel.ai">Vercel AI SDK</A>
      </>
    }
    deployUrl="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-langchain&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=ai-chat-langchain&repository-name=next-ai-chat-langchain"
    repoUrl="https://github.com/vercel/ai/tree/main/examples/next-langchain"
  >
    ![Next.js Starter](/templates/next-langchain-light.png)
  </ExampleCard>
  <ExampleCard
    title="Nuxt LangChain Starter"
    description={
      <>
        Starter template for building AI-powered chat app with{' '}
        <A href="https://nuxt.com">Nuxt</A>,{' '}
        <A href="https://github.com/hwchase17/langchain">LangChain</A>, and the{' '}
        <A href="https://sdk.vercel.ai">Vercel AI SDK</A>
      </>
    }
    deployUrl="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnuxt-langchain&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=ai-chat-langchain&repository-name=nuxt-ai-chat-langchain"
    repoUrl="https://github.com/vercel/ai/tree/main/examples/nuxt-langchain"
  >
    ![Nuxt Starter](/templates/nuxt-langchain-light.png)
  </ExampleCard>
</div>

## Integrations

{<div className="grid lg:grid-cols-2 grid-cols-1 gap-4 mt-8">

  <IntegrationCard href="/docs/guides/providers/openai" title="OpenAI" description="OpenAI is an AI research and deployment company. The Vercel AI SDK provides a simple way to use OpenAI in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/azure-openai" title="Azure OpenAI" description="Azure OpenAI Service offers industry-leading coding and language AI models that you can fine-tune to your specific needs for a variety of use cases." />
  <IntegrationCard href="/docs/guides/providers/langchain" title="LangChain" description="LangChain is an open source prompt engineering framework for developing applications powered by language models. The Vercel AI SDK provides a simple way to use LangChain in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/mistral" title="Mistral" description="Mistral is an AI research and deployment company. The Vercel AI SDK provides a simple way to use Mistral models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/aws-bedrock" title="AWS Bedrock" description="Bedrock is a fully managed service that offers a choice of high-performing foundation models from leading AI companies through AWS. The Vercel AI SDK provides a simple way to use AWS Bedrock models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/google" title="Google" description="Google Gemini is a state-of-the-art AI model by Google. The Vercel AI SDK provides a simple way to use Google Gemini in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/cohere" title="Cohere" description="Cohere is an AI platform for enterprise. The Vercel AI SDK provides a simple way to use Cohere's command models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/anthropic" title="Anthropic" description="Anthropic is an AI research and deployment company. The Vercel AI SDK provides a simple way to use Anthropic's Claude models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/replicate" title="Replicate" description="Replicate is an on-demand AI model hosting platform. The Vercel AI SDK provides a simple way to use Replicate models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/hugging-face" title="Hugging Face" description="Hugging Face is a collaboration and model hosting platform for the machine learning community. The Vercel AI SDK provides a simple way to use Hugging Face models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/fireworks" title="Fireworks" description="Fireworks is a lightning-fast LLM inference platform. The Vercel AI SDK provides a simple way to use Fireworks.ai's models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/perplexity" title="Perplexity" description="Perplexity AI is an answer engine that combines AI with web search to provide ready-made answers to user questions in natural language. The Vercel AI SDK provides a simple way to use Perplexity's models in your frontend web applications." />
  <IntegrationCard href="/docs/guides/providers/inkeep" title="Inkeep" description="Inkeep's AI chat service provides answers grounded in your company's documentation, blogs, support tickets, and other sources. The Vercel AI SDK provides a simple way to use Inkeep's RAG service to build a custom support and search copilot." />
</div>}
